<template>
    <div class="charge-container">
        <el-table
            :data="order"
            border
            style="width: 100%">
            <el-table-column
                label="产品图片"
                width="180px">
                <!-- 插槽作用域 -->
                <template v-slot="{row}">
                  <img :src="row.imageUrl" alt="" width="80px">
                    <!-- <el-avatar
                        fit="scale-down" 
                        shape="square" 
                        :size="80" 
                        :src="row.imageUrl">
                    </el-avatar>  -->
                </template>

            </el-table-column>
            <el-table-column
                prop="productName"
                label="产品名称">
            </el-table-column>
            <el-table-column
                prop="description"
                label="产品描述">
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格(元)">
            </el-table-column>
            <el-table-column
                prop="inventory"
                label="库存">
            </el-table-column>
            <el-table-column
                label="操作">
                <template v-slot="{row}">
                  <el-button
                      type="primary"
                      size="medium"
                      v-isbuy = "row.inventory"
                      @click="pre_order(row)"
                      icon="iconfont icon-vip3">
                      <!-- <i class="iconfont icon-vip3"></i> -->
                      充值
                  </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>


<script>
  import * as api from "../../../../api/transaction"
  import { mapState,mapMutations,mapActions} from "vuex"
  export default {
    data() {
      return {
        // vipList: []
      }
    },
    computed: {
      ...mapState('orders',['order'])
    },
    created () {
      // api.getVipListApi("20210827165510715")
      // .then(res => {
      //   // console.log(res);
      //   if(res.data.state){
      //     //获取成功
      //     this.vipList = res.data.data
      //   }else{
      //     //获取失败
      //     // this.$message.error("获取失败")
      //   }
      // })
      this.FETCH_ORDER();

    },
    //自定义指令
    directives: {
      isbuy:{
        inserted(el,binding){
          // console.log(el,binding);
          //库存为0  加上禁用按钮
          if(binding.value == 0){
            let className = el.className
            el.disabled = true;//禁用按钮
            el.className = className + " " + "is-disabled";
          }
        }
      }
    },
    methods: {
      pre_order(row) {
        console.log(row);
        //获得当前这一行的product_id产品的id
        let {product_id} = row
        //$confirm提示
        this.$confirm('您正在购买'+ row.productName +'充值，是否确定购买'+ row.description + '???', '购买提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        })
        .then(() => {//点了确定
          this.$router.push({path:"/preorder" , query:{product_id}})
        })
        .catch(() => {//点了取消
          this.$message({
            type: 'error',
            message: '已取消购买'
          });          
        });
      },
      ...mapActions('orders',['FETCH_ORDER']),
      ...mapMutations('orders',['SET_ORDER'])
    },
    meta: {
        title: 'vipCharge',
        name:"vip充值",
        icon: 'iconfont icon-chongzhi'
    }
  }
</script>

<style lang="less" scoped>
/deep/ .el-table .el-table__cell{
    text-align: center;
}
/deep/ .el-button--primary{
    background-color: #05a000;
    color: white;
}
.el-avatar {
	/deep/ img {
		width: 100%;
	}
	height: 30px !important;
	background-color: #fff;
}
</style>